<template>
  <div>
    <common-header title="订单详情"></common-header>
   <div class="headerWrap">
      <van-contact-card
        :type="cardType"
        :name="nowOrder.contact.name"
        :tel="nowOrder.contact.tel"
        @click="onAdd"
      />
      <div class="title">
        <span>总仓发货</span>
      </div>
      <van-card
        v-for="goods in nowOrder.items" :key="goods.id"
        :num="goods.num"
        :price="goods.minPrice"
        :title="goods.name"
        :thumb="goods.pic"
      />
   </div>
  </div>
</template>

<script>
import CommonHeader from '@components/CommonHeader'
import { mapMutations, mapState } from 'vuex'
export default {
  computed: {
    ...mapState({
      nowOrder: state => state.order.nowOrder, // 当前订单
      contacts: state => state.contact.contacts // 联系人信息
    })
  },
  data () {
    return {
      cardType: 'add'
    }
  },
  created () {
    this.showContact()
  },
  methods: {
    // 显示联系人
    showContact () {
      // 先查看订单中是否已经有联系人，如果有就不要在换了
      if (this.nowOrder.contact.name) {
        this.cardType = 'edit'
        return
      }
      // 首先要看联系人信息里面有没有联系人，没有说明需要添加
      if (!this.contacts.length) {
        this.cardType = 'add'
        return
      }
      // 说明有联系人
      this.cardType = 'edit'
      // 查找是否有默认联系人，有则显示，没有则显示联系人列表第一个
      const defaultItem = this.contacts.find(ele => ele.idDefault)
      if (defaultItem) {
        // 找到默认联系人，将他显示在当前订单的联系人中
        this.setOrderContact(defaultItem)
      } else {
        this.setOrderContact(this.contacts[0])
      }
    },
    // 判断是添加联系人还是修改联系人
    onAdd () {
      if (this.cardType === 'add') {
        this.$router.push('/contactAdd')
      } else {
        this.$router.push('/contactList')
      }
    },
    ...mapMutations('order', ['setOrderContact'])
  },
  components: {
    CommonHeader
  }
}
</script>

<style lang="scss" scoped>
.title {
  margin: 10px 0;
  margin-top: 30px;
  font-size: 18PX;
  padding-left: 5px;
}
</style>
